<template>
	<view class="homepage">
		
		<view class="people">
			<!-- <view class="headImg">
				<image src="https://img.zcool.cn/community/01cfd95d145660a8012051cdb52093.png@1280w_1l_2o_100sh.png" />
			</view> -->
			<view class="info">
				<view class="nick">
					<text style="margin-left: 11px;">{{ userName }}</text>
					<!-- <view class="sex">
						<u-icon name="man" color="#ffffff" size="24"></u-icon>
					</view> -->
				</view>
				<!-- <view class="userId">
					<view class="number">
						<text>{{ userId }}</text>
					</view>
				</view> -->
			</view>
			<!-- <view class="space">
				<text style="color: #fff;">详情</text>
				<u-icon name="arrow-right" color="#fff" size="20"></u-icon>
			</view> -->
		</view>
		<!--		<view class="list">
			<view class="item">
				<view class="text">
					<text>43</text>
					<text>今日任务</text>
				</view>
				<u-line direction="col" color="#979797 " length="32rpx"></u-line>
			</view>
			<view class="item">
				<view class="text">
					<text>20</text>
					<text>今日完成</text>
				</view>
				<u-line direction="col" color="#979797 " length="32rpx"></u-line>
			</view>
			<view class="item">
				<view class="text">
					<text>1200</text>
					<text>累计完成</text>
				</view>
			</view>
		</view>-->
		<view class="infos">
			<!-- <view class="open-vip">
				<text class="text">当前APP版本过低，请立即升级！</text>
				<text class="button">立即下载</text>
			</view> -->
			<!-- <view class="tool">
				<view>
					<image src="@/static/image/personal/member.png" />
					<text>我的工作</text>
				</view>
				<view>
					<image src="@/static/image/personal/shop.png" />
					<text>我的任务</text>
				</view>
				<view>
					<image src="@/static/image/personal/house.png" />
					<text>我的消息</text>
				</view>
				<view>
					<image src="@/static/image/personal/money.png" />
					<text>我的卡片</text>
				</view>
			</view> -->
			<view class="set">
				<!-- 				<view @click="jumpToPage('/pages/user/detail')">
					<text>个人信息</text>
					<image class="right" src="@/static/image/personal/Clipped.png" />
				</view> -->
				<view @click="jumpToPage('/pages/user/message')">
					<text>我的消息</text>
					<image class="right" src="@/static/image/personal/Clipped.png" />
					<u-badge type="error" max="99" color="#fff" :value="unReadCount" absolute :offset="[10, 25]"></u-badge>
				</view>
				<view @click="jumpToPage('/pages/login/modifyPsw')">
					<text>修改密码</text>
					<image class="right" src="@/static/image/personal/Clipped.png" />
				</view>
				<view @click="jumpToPage('/pages/user/printSetting')">
					<text>打印设置</text>
					<image class="right" src="@/static/image/personal/Clipped.png" />
				</view>
				<view @click="appUpdate">
					<text>
						版本升级
						<text v-if="currentVersion != lastVersion && currentVersion && lastVersion" class="app_update">
							当前{{ currentVersion || '' }}，最新{{ lastVersion || '' }}
						</text>
						<text v-if="currentVersion == lastVersion && currentVersion && lastVersion" class="app_update">当前为最新版本{{ lastVersion || '' }}</text>
					</text>
					<image class="right" src="@/static/image/personal/Clipped.png" />
				</view>
				<!--				<view @click="jumpToPage('/pages/user/print')">-->
				<!--					<text>打印模拟，需要删除</text>-->
				<!--					<image class="right" src="@/static/image/personal/Clipped.png" />-->
				<!--				</view>-->
				<!-- 				<view @click="jumpToPage('/pages/user/contact')">
					<text>联系我们</text>
					<image class="right" src="@/static/image/personal/Clipped.png" />
				</view> -->
			</view>
			<view class="service" @click="showLoginOut = true">
				<view>
					<text>退出</text>
					<image class="right" src="@/static/image/personal/Clipped.png" />
				</view>
			</view>
		</view>
		<u-modal
			width="500rpx"
			:show="showLoginOut"
			content="是否退出登录？"
			showCancelButton
			@confirm="loginOut"
			@cancel="showLoginOut = false"
			ref="uModal"
			style="text-align: center"
		></u-modal>
	</view>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app';
import { http } from '@/utils/http';
import { useUserStore } from '@/stores/useUserStore';
// #ifdef APP-PLUS
import checkappupdate from '@/utils/checkAppUpdate';
// #endif

const { userName, userId } = useUserStore().userInfo;
const unReadCount = computed(() => useUserStore().unReadCount);
const currentVersion = computed(() => useUserStore().currentVersion);
const lastVersion = computed(() => useUserStore().lastVersion);
onShow(() => {
	// 获取最新未读条数
	useUserStore().getUnReadMessage();
	getVersionInfo()
});

// 退出登录
const showLoginOut = ref(false);
function loginOut() {
	showLoginOut.value = false;
	useUserStore().logout();
}

// 页面跳转
function jumpToPage(url) {
	uni.navigateTo({
		url: url
	});
}

// 获取版本信息
function getVersionInfo () {
	// #ifdef APP-PLUS
	const url = '/system/sysappversion/latestAppDownloadUrl'
	plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
		let platform = plus.os.name.toLocaleLowerCase()
		http({
			method: 'POST',
			url: url,
			data: {}
		}).then((data)=>{
			useUserStore().setCurrentVersion(widgetInfo.version ?? '')
			useUserStore().setLastVersion(data?.data?.versionName ?? '')
		})
	});
	// #endif
}

// 版本升级
function appUpdate() {
	// #ifndef APP-PLUS
	uni.showToast({
		icon: 'error',
		title: '请到APP端操作'
	});
	// #endif
	// #ifdef APP-PLUS

	checkappupdate.check({
		title: '检测到有新版本！',
		content: '请升级app到最新版本！',
		canceltext: '暂不升级',
		oktext: '立即升级',
		showTip: true
	});
	// #endif
}
</script>

<style lang="scss" scoped>
.homepage {
	width: 100%;

	& text {
		color: #333333;
		font-family: PingFangSC-Semibold, PingFang SC;
	}

	.bar {
		.right {
			display: flex;

			& view {
				width: 52rpx;
				height: 52rpx;
				margin-left: 26rpx;
				border-radius: 26rpx;
				background: #f0eeff;
				display: flex;
				justify-content: center;
				align-items: center;
				box-shadow: 0rpx -2rpx 2rpx 4rpx rgba(255, 255, 255, 0.5), 0rpx 4rpx 4rpx 0rpx rgba(197, 183, 211, 0.5), inset 0rpx 2rpx 6rpx 0rpx rgba(255, 255, 255, 0.5);

				> image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}

	.people {
		padding: 56rpx 42rpx 30rpx 32rpx;
		display: flex;
		align-items: center;
		background: rgb(68, 134, 244);
		color: #ffffff;

		.headImg {
			> image {
				width: 126rpx;
				height: 126rpx;
				border-radius: 83rpx;
				margin-right: 20rpx;
			}
		}

		.info {
			flex: 1;

			.nick {
				display: flex;

				> text {
					font-size: 16px;
					// font-weight: 600;
					line-height: 20px;
					color: #ffffff;
				}

				.sex {
					width: 24rpx;
					height: 24rpx;
					border-radius: 12rpx;
					color: #ffffff;
				}
			}

			.userId {
				width: 220rpx;
				display: flex;
				border-radius: 8rpx;
				// margin-top: 10rpx;

				> image {
					width: 36rpx;
					height: 40rpx;
				}

				.number {
					flex: 1;
					display: flex;
					justify-content: left;

					> text {
						font-size: 24rpx;
						font-weight: 600;
						line-height: 40rpx;
						color: #ffffff;

						&:last-child {
							font-weight: 500;
							font-size: 22rpx;
							margin-left: 3rpx;
						}
					}
				}
			}
		}

		.space {
			display: flex;
			align-items: center;

			> text {
				font-size: 28rpx;
				line-height: 40rpx;
			}
		}
	}

	.list {
		width: 100%;
		display: flex;
		padding: 34rpx 14rpx;
		box-sizing: border-box;

		.item {
			width: 34%;
			display: flex;
			justify-content: space-evenly;
			align-items: center;

			.text {
				display: flex;
				flex-direction: column;
				align-items: center;

				> text:first-child {
					font-size: 36rpx;
					font-family: CloudHeiChaoGBK;
					line-height: 48rpx;
					font-weight: 600;
				}

				> text:last-child {
					font-size: 24rpx;
					color: #999999;
					line-height: 34rpx;
				}
			}
		}
	}

	.infos {
		padding: 0 0rpx;

		.open-vip {
			width: 100%;
			height: 72rpx;
			background: linear-gradient(180deg, #f7e5b4 0%, #ffe6af 2%, #ebc075 100%);
			border-radius: 49rpx;
			display: flex;
			align-items: center;
			margin-top: 36rpx;
			padding: 0 24rpx 0 34rpx;
			box-sizing: border-box;

			> image {
				width: 48rpx;
				height: 48rpx;
			}

			.text {
				flex: 1;
				font-size: 24rpx;
				line-height: 34rpx;
				margin-left: 14rpx;
			}

			.button {
				width: 128rpx;
				height: 42rpx;
				background: linear-gradient(90deg, #4d4d4d 0%, #151515 100%);
				border-radius: 22rpx;
				font-size: 22rpx;
				color: #ffdfa9;
				line-height: 42rpx;
				text-align: center;
			}
		}

		.tool {
			display: flex;
			width: 100%;
			height: 172rpx;
			background: #ffffff;
			box-shadow: 0rpx 2rpx 22rpx 0rpx rgba(114, 118, 206, 0.27);
			border-radius: 28rpx;
			justify-content: space-evenly;
			// margin: 22rpx 0;

			> view {
				display: flex;
				flex-direction: column;

				& text {
					font-size: 22rpx;
					font-weight: 600;
					color: #666666;
					line-height: 32rpx;
				}

				& image {
					width: 98rpx;
					height: 96rpx;
					margin-top: 10rpx;
				}
			}
		}

		.set {
			width: 100%;
			padding: 20rpx 20rpx 20rpx 20rpx;
			background: #ffffff;
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.06);
			border-radius: 0rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			box-sizing: border-box;

			> view {
				display: flex;
				align-items: center;
				height: 90rpx;
				justify-content: space-between;
				// margin-bottom: 40rpx;
				position: relative;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.04);

				& text {
					// flex: 1;
					font-size: 14px;
					line-height: 40rpx;
					margin-left: 30rpx;
				}

				.icon {
					width: 36rpx;
					height: 36rpx;
				}

				.right {
					width: 40rpx;
					height: 40rpx;
					color: rgb(212, 212, 212);
				}
			}
			> view:nth-last-child(1) {
				border-bottom: none;
			}
		}

		.service {
			background: #ffffff;
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.06);
			border-radius: 0rpx;
			margin-top: 26rpx;
			padding: 34rpx 24rpx 0rpx 34rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			> view {
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;

				& text {
					flex: 1;
					font-size: 14px;
					line-height: 40rpx;
					margin-left: 30rpx;
				}

				.icon {
					width: 36rpx;
					height: 36rpx;
				}

				.right {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
}
.app_update {
	font-size: 13px !important;
	color: darkgray !important;
	line-height: 24px !important;
	margin-top: 2px;
	display: inline-block;
}
</style>
